<template>
  <div v-if="dataList && dataList.length" class="line-rate-group">
    <line-rate
      v-for="(item, index) of dataList"
      :key="item[fields.key] || index"
      :type="type"
      :suffix="item[fields.suffix]"
      :title="item[fields.label]"
      :text="item[fields.value]"
      :percent="(item[fields.value] / maxValue) * 100"
      :stroke-color="strokeColor"
      :slipper-color="slipperColor"
      class="line-rate"
      @click.stop="$emit('more', item)"
    />
  </div>
  <empty v-else />
</template>

<script>
import LineRate from './line-rate.vue';
import Empty from '../Empty/index.vue';

export default {
  name: 'line-rate-group',
  emits: ['more'],
  components: { LineRate, Empty },
  props: {
    type: { type: String, default: 'thin-line slipper' },
    dataList: { type: Array, default: () => [] },
    replaceFields: { type: Object, default: () => ({}) },
    slipperColor: { type: String, default: undefined },
    strokeColor: {
      type: Object,
      default: () => ({ '0%': '#131D29', '100%': '#384D96' }),
    },
  },
  computed: {
    fields() {
      const dft = { key: 'key', label: 'label', value: 'value', suffix: 'suffix' };
      return Object.assign({}, dft, this.replaceFields);
    },
    maxValue() {
      if (!this.dataList || !this.dataList.length) {
        return 0;
      }
      return this.dataList.reduce((res, item) => {
        res = item[this.fields.value] > res ? item[this.fields.value] : res;
        return res;
      }, 0);
    },
  },
};
</script>

<style scoped lang="less">
.line-rate-group {
  .line-rate:not(:last-child) {
    margin-bottom: 6px;
  }
}
</style>
